<template>
  <div id="headerTop">
      <slot name="left" class="left"></slot>
      <span class="headerContent">{{title}}</span>
      <slot name="right"></slot>
  </div>
</template>
<script>
export default {
  name: "",
  props:{
      title:{
        type:String,
        default:"头部"
      }
  },
  data: () => ({

  })
}
</script>
<style lang="less" scoped>
#headerTop{
    height: 50px;
    width: 100vw;
    display: flex;
    position: fixed;
    top: 0px;
    justify-content: center;
    align-items: center;
    background: #ccc;
    font-size: 24px;
    text-align: center;
}
.left{
  width: 50px;
}
.headerContent{
  flex: 3
}
.right{
  width:50px;
}
</style>
